<script setup>
import Temp from '../components/Temp.vue';

const props =  defineProps({
msg: {
    type: String,
    required: true
},
data: {
    type: Object,
    required: false,
    default (){
        return [
            {title:'售前服务',content:'<p>由专业的技术团队协助您做好工程规划和系统需求分析，使得我们的产品能够最大限度的满足您的需要，同时也使您的投资发挥出最大的综合经济效益</p>',image:'/src/assets/Frame_171.png'},
            {title:'售中服务',content:'<p>1.图纸审查及更定；</p><p>2.提供产品生产过程中监造及咨询；</p><p>3.配合第三方检查验收</p>',image:'/src/assets/Frame_173.png'},
            {title:'售后服务',content:'<p>1.产品安装技术支持</p><p>2.产品使用后的保养、维修及调试方案;</p><p>3.及时的备件供货体系及产品技术培训;</p><p>4.定期回访与沟通，帮您排除使用过程中的隐患与盲点</p>',image:'/src/assets/Frame_175.png'}
        ]
    }
}
})

</script>

<template>
    <Temp lit=[]>
        <div class="w-full container mx-auto pt-24 mobile:px-6 mobile:pt-20">
            <div v-for="(item, index) in data" :key="index"
                 class="w-full h-auto self-center bg-no-repeat mb-[90px] pt-[90px] relative mobile:mb-6 mobile:pt-0 mobile:border-2 mobile:border-undercolor wow animate__animated animate__pushOnRight timing">
                <div class="flex h-[479px] bg-white border-2 border-undercolor mobile:border-0 p-[80px] relative mobile:h-auto  mobile:p-6">
                    <div class="w-1/2 flex-auto mobile:w-full" >
                        <h3 class="text-5xl text-dominant my-8 font-bold mobile:text-base mobile:mb-2 mobile:mt-2">{{item.title}}</h3>
                        <div class="text-2xl leading-[44px] text-gray3 w-1/2 mobile:text-sm mobile:w-full" v-html="item.content"></div>
                    </div>
                </div>
                <img class="ilmobile:float-right ilmobile:absolute h-full ilmobile:right-0 ilmobile:top-0 mobile:relative  mobile:m-auto mobile:w-4/5" :src="item.image" alt="">
            </div>
        </div>
    </Temp>
</template>
<style scoped>
ul.grid li.active{
  border-color: #2F3767;
  color: #2F3767
}
.mask::before{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #2F3767cc;
    pointer-events: none;
}
</style>